<template>
	<view class="wallet">
		<NavBar title="我的余额" bgc="linear-gradient( 180deg, #FFEFED 0%, rgba(255,248,244,0.6) 70%, #FFFFFF 98%)" />
		<view class="my-wallet">
			<!-- 我的余额 -->
			<view class="spoon">
				<view class="left">
					<view class="tit"> 我的余额 </view>
					<view class="price"> {{deposit}} </view>
				</view>
				<view class="right" @tap="goBilling">
					<text>提现记录</text>
					<image src="/static/icon/rider/right.png" class="r-img"/>
				</view>
			</view>
			<!-- 提现金额 -->
			<view class="amount">
				<view class="amount-title"> 提现金额(元) </view>
				<view class="price">
					<view> ￥ </view>
					<input type="number" v-model="price" placeholder="0" placeholder-style="color:#333333" />
				</view>
				<view class="tips"> 最低提现金额<text>10元</text>，提现手续费0.1% </view>
			</view>
			<!-- 提现方式 -->
			<view class="type">
				<view class="type-title"> 选择提现方式： </view>
				<view class="item" v-for="(item, index) in type" :key="item.icon" @tap="checkType(item.id)">
					<view class="label">
						<image :src="item.icon" class="l-img"/>
						<text> {{ item.title }} </text>
					</view>
					<view class="value">
						<image class="v-img" src="/static/icon/rider/checked.png" v-if="typeId == item.id" />
						<image class="v-img" src="/static/icon/rider/check.png" v-else />
					</view>
				</view>
			</view>
			<view class="btn" @tap="submit"> 立即提现 </view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue'
	import { TXApi } from '@/service/rider.js'
	import { useMiddleWare } from '@/store/index.js'
	const deposit = ref() // 余额
	const txType = ref() // 提现类型
	const type = ref([
		{ id: 'wechat', icon: '/static/icon/rider/wx.png', title: '微信支付' },
		{ id: 'alipay', icon: '/static/icon/rider/zfb.png', title: '支付宝' },
		{ id: 'bank', icon: '/static/icon/rider/card.png', title: '银行卡' }
	])
	const price = ref()
	const typeId = ref('wechat')
	const checkType = (id) => {
		typeId.value = id
	}
	const submit = () => {
		const { txInfo } = useMiddleWare()
		if(price.value === undefined) return getApp().globalData.toast('请输入需要提现的金额')
		if(Number(deposit.value) < price.value) return getApp().globalData.toast('您的可提现金额为'+deposit.value+'元')
		if(price.value < 10) return getApp().globalData.toast('最小提现金额为10元')
		if((typeId.value=='wechat'&&!txInfo.wx_img)||(typeId.value=='alipay'&&!txInfo.zfb_img)||(typeId.value=='bank'&&!txInfo.bank_code)) return getApp().globalData.toast('请先设置提现信息')
		let params = {}
		if(typeId.value=='bank') {
			params = {
				type: txType.value,
				amount: price.value,
				method: typeId.value,
				name: txInfo.bank_name,
				bank: txInfo.bank_site,
				account: txInfo.bank_code
			}
		} else {
			params = {
				type: txType.value,
				amount: price.value,
				method: typeId.value,
				receiving_code: typeId.value=='wechat'?txInfo.wx_img:txInfo.zfb_img
			}
		}
		TXApi(params).then(res => {
			getApp().globalData.toast('操作成功')
			setTimeout(() => {
				uni.navigateBack()
			}, 500)
		})
	}
	const goBilling = () => {
		uni.navigateTo({
			url: `/pages/riderPages/billingDetails/billingDetails?type=1&txType=${txType.value}`
		})
	}
	onLoad((e) => {
		const { price, type } = e
		deposit.value = price
		txType.value = type
	})
</script>

<style scoped lang="scss">
	.my-wallet {
		padding: 10px 12px;
		box-sizing: border-box;
		.spoon {
			height: 90px;
			display: flex;
			padding-left: 14px;
			align-items: center;
			justify-content: space-between;
			border-radius: 10px;
			background: linear-gradient( 314deg, #FF8508 0%, #FF4847 100%);
			.left {
				.tit {
					color: #FFFFFF;
					font-size: 14px;
					font-weight: 400;
					line-height: 22px;
					margin-bottom: 7px;
				}
				.price {
					color: #FFFFFF;
					font-size: 22px;
					font-weight: 700;
					line-height: 22px;
				}
			}
			.right {
				display: flex;
				align-items: center;
				justify-content: end;
				width: 73px;
				height: 24px;
				color: #FFFFFF;
				font-size: 12px;
				font-weight: 400;
				background: rgba(255,255,255,0.5);
				border-radius: 227px 0px 0px 227px;
				.r-img {
					width: 14px;
					height: 14px;
				}
			}
		}
		.amount {
			padding: 15px;
			margin-top: 10px;
			border-radius: 10px;
			background-color: #fff;
			.amount-title {
				color: #333333;
				font-size: 14px;
				font-weight: 400;
				line-height: 20px;
				margin-bottom: 20px;
			}
			.price {
				display: flex;
				align-items: center;
				margin-bottom: 9px;
				view {
					color: #333333;
					font-size: 14px;
					font-weight: 500;
					line-height: 20px;
					margin-right: 10px;
				}
				input {
					color: #333333;
					font-size: 22px;
					font-weight: 500;
					line-height: 20px;
				}
			}
			.tips {
				color: #999999;
				font-size: 13px;
				font-weight: 400;
				line-height: 15px;
				text {
					color: #FF3B1E;
				}
			}
		}
		.type {
			padding: 15px;
			padding-bottom: 0;
			margin-top: 10px;
			border-radius: 10px;
			background-color: #fff;
			.type-title {
				color: #333333;
				font-size: 14px;
				font-weight: 500;
				line-height: 16px;
				margin-bottom: 10px;
			}
			.item {
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #eeeeee;
				&:nth-last-of-type(1) {
					border-bottom: 0;
				}
				.label {
					display: flex;
					align-items: center;
					.l-img {
						width: 24px;
						height: 24px;
						margin-right: 7px;
					}
					text {
						color: #333333;
						font-size: 14px;
						font-weight: 400;
						line-height: 16px;
					}
				}
				.value {
					.v-img {
						width: 20px;
						height: 20px;
					}
				}
			}
		}
		.btn {
			height: 40px;
			color: #FFFFFF;
			margin-top: 20px;
			font-weight: 500;
			line-height: 40px;
			text-align: center;
			background: #FF3B1E;
			border-radius: 106px;
		}
	}
</style>
